<template>
    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 30px">
        <div style="width: 62px;height: 62px;background: #1F6FE5;border-radius: 50%;margin-right: 24px;text-align: center">
            <span style="font-size: 24px;color: white;line-height: 62px;">3</span>
        </div>
        <div style="display: flex;align-items:flex-start;flex-direction: column;justify-content: center;flex: 1">
            <div style="font-size: 22px;line-height: 29px;display: flex;align-items: center">
                表单：#{{formId}}
                <div style="font-size: 14px;margin-left: 10px">
                    <a-tag :color="stateColor">{{state|stateText}}</a-tag>
                </div>
            </div>
            <div style="font-size: 12px;line-height: 19px;margin-top: 6px">最后一次更新于 2 天前 by Eugene Jenkins</div>
        </div>
        <div style="display: flex;flex-direction: row;align-items: center" v-if="showAccessBtn">
            <my-button color="green">通过</my-button>
            <my-button color="red">拒绝</my-button>
        </div>
        <div style="display: flex;flex-direction: row;align-items: center" v-if="!readOnly">
            <my-button color="green" @click.native="showPostConfirm" v-if="showCommitBtn">确认提交</my-button>
            <my-button style="margin-left: 20px" @click.native="showDeleteConfirm">
                <a-icon type="delete" slot="icon" style="margin-right: 8px"/>
                删除表单
            </my-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'FormTop',
        inject: ['formId'],
        props: ['state', 'readOnly'],
        filters: {
            stateText (value) {
                switch (value) {
                    case 0: return '新建状态';
                    case 1: return '可用状态';
                    case 2: return '审核状态';
                    case 3: return '审核成功';
                    default: return '未知状态';
                }
            },
        },
        computed: {
            showAccessBtn () {
                const code = parseInt(this.state);
                return (code===0||code===1||code===2)&&this.readOnly;
            },
            showCommitBtn () {
                return parseInt(this.state)===0;
            },
            stateColor () {
                switch (this.state) {
                    case 0: return 'blue';
                    case 1: return 'blue';
                    case 2: return 'green';
                    case 3: return 'cyan';
                    default: return 'red';
                }
            },
        },
        methods: {
            showPostConfirm () {
                const _this = this;
                this.$confirm({
                    title: '确认修改这份表单吗?',
                    content: '',
                    okText: '确定',
                    cancelText: '取消',
                    async onOk () {
                        _this.$emit('update');
                    },
                    onCancel () {
                    },
                });
            },
            showDeleteConfirm () {
                const _this = this;
                this.$confirm({
                    title: '确认删除这份表单吗?',
                    content: '已提交的数据也将被删除',
                    okText: '删除',
                    okType: 'danger',
                    cancelText: '取消',
                    async onOk () {
                        if (_this.formId) {
                            await _this.$apis.formAPI.deleteForm(_this.formId);
                            setTimeout(()=>history.back(), 500);
                        }
                    },
                });
            },
        },
    };
</script>

<style scoped>

</style>
